<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="/bootstrap.min.css" type='text/css' rel='stylesheet'>

<title>Lista de Produtos</title>

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
			
			var itensCarrinho = new Array();
			var totalCarrinho = 0;
					
			function adicionarproduto(id, descricao, preco){
				
				totalCarrinho += preco;
				$("#total").text("R$   "+totalCarrinho);
				
				itensCarrinho.push(id);
				
				$("#carrinho").append("<tr><td>"+descricao+"</td><td>R&#36;  "+preco+"</td><tr>");
				
			}
			
			
			function comprar(){
				
				var itensJson = JSON.stringify(itensCarrinho);
				
				window.location = "/cadastrar-compra/?produtos="+itensJson;
				
			}
				
		</script>


</head>

<body>

	<div class="container">
		<div class="row-fluid">
			<div class="span8">
				<div class="row">
				    
				    <p>
						<a href="/">Home</a> |
						<a href="/listar-compras/">Compras</a> | 
						<a href="/cadastrar-produto.html">Add Produto</a>
					<p>
					
					<h1>Lista de Produtos</h1> 
					<p>Clique no produto para adiconar ao carrinho</p>
				</div>
				<div class="row">
				
					<table class="table">
	
						<thead>
							<tr>
								<th>#</th>
								<th>Nome</th>
								<th>Pre&ccedil;o</th>
							</tr>
						</thead>
	
	
						<c:forEach var="produto" items="${produtos}">
	
								<tr>
									<td>${produto.id}</td>
									<td><a href="#" onclick="javascript:adicionarproduto(${produto.id},'${produto.descricao}',${produto.preco})">${produto.descricao}</a>
									<td>R&#36;   ${produto.preco}</td>
								</tr>
	
							</c:forEach>
							
	       			</table>
	       		</div>

			</div>
			
			<div class="span1">
			</div>

			<div class="span3">
				<div class="row">
					<h4>Seu Carrinho</h4>
					<p>Produtos que voc&#234; escolheu</p>
				</div>
				<div class="row">
				
					<table class="table table-bordered">
					
					
						<tbody id="carrinho">
						
						
						</tbody>
	       			</table>
					<div>
						<button class="btn btn-mini btn-primary" type="button" onclick="javascript:comprar()">Comprar</button>    
						Total <span id="total"> R&#36;   0</span>
					</div>
	       		</div>
			
			</div>

		</div>

	</div>
	
</body>

</html>